<template>
  <div class="homeLayout pageBg">
    <!-- 轮播图 -->
    <div class="banner">
      <el-carousel :interval="3000" height="500px" arrow="always">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <div
            v-if="item.target === 'miniProgram'"
            :to="item.url"
            class="like"
            target="_blank"
          >
            <img :src="item.picurl" alt="" />
          </div>
          <div v-else :to="`/classlist?${item.url}`" class="like">
            <img :src="item.picurl" alt="" />
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- 添加搜索框 -->
      <div class="search-container">
        <h1 class="search-title">14312+份高清 4K / 8K 壁纸图片提供免费下载！</h1>
        <el-input
          v-model="searchKeyword"
          placeholder="搜索专辑或壁纸..."
          class="search-input"
          @focus="handleSearch"
        >
          <template #suffix>
            <el-icon class="search-icon" @click="handleSearch"><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 公告 -->
    <div class="notice" >
      <div class="left">
        <i class="el-icon-bell" style="font-size: 20px"></i>
        <span class="text">公告</span>
      </div>
      <div class="center">
        <el-carousel :interval="1500" direction="vertical" height="80px">
          <el-carousel-item v-for="item in noticeList" :key="item.noticeId">
            <router-link :to="`/notice/${item.noticeId}`">
              {{ item.noticeTitle }}
            </router-link>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <i class="el-icon-arrow-right" style="font-size: 16px; color: #333"></i>
      </div>
    </div>

    <!-- 将每日推荐和专题精选合并为标签页 -->
    <div class="wallpaper-section">
      <el-tabs v-model="activeTab" class="demo-tabs">
        <el-tab-pane label="每日推荐" name="daily">
          <div class="tab-header">
            <div class="date">
              <i class="el-icon-date" style="font-size: 18px"></i>
              <span>{{ currentDate }}</span>
            </div>
          </div>
          <div class="waterfall-container">
            <vue-masonry-wall
              :items="randomList"
              :column-width="380"
              :max-columns="3"
              :gap="20"
            >
              <template #default="{ item }">
                <div class="waterfall-item" @click="goPreview1(item.id)">
                  <img :src="item.smallPicurl" alt="" />
                </div>
              </template>
            </vue-masonry-wall>
          </div>
        </el-tab-pane>

        <el-tab-pane label="专题精选" name="theme">
          <div class="tab-header">
            <router-link to="/classify/index" class="more">More+</router-link>
          </div>
          <div class="waterfall-container">
            <vue-masonry-wall :items="classifyList" :column-width="300" :gap="20">
              <template #default="{ item }">
                <div class="waterfall-item" @click="goPreview2({id:item.id, type:item.type})">
                  <img :src="item.picurl" alt="" />
                  <p class="item-title">{{ item.title }}</p>
                </div>
              </template>
            </vue-masonry-wall>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { listNotice } from "@/api/wallpaper/notice";
import { listWall } from "@/api/wallpaper/wall";
import { listClassify } from "@/api/wallpaper/classify";
import { listBanner } from "@/api/wallpaper/banner";
import { Search } from '@element-plus/icons-vue';
import VueMasonryWall from '@yeger/vue-masonry-wall'

// 模拟数据请求
const bannerList = ref([]);
const randomList = ref([]);
const noticeList = ref([]);
const classifyList = ref([]);

const getBanner = async () => {
  const res = await listBanner();
  console.log(res);
  bannerList.value = res.rows;
};

const getDayRandom = async () => {
  const res = await listWall();
  randomList.value = res.rows.slice(0, 8);
};

const getNotice = async () => {
  const res = await listNotice();
  noticeList.value = res.rows;
};

const getClassify = async () => {
  const res = await listClassify();
  classifyList.value = res.rows;
};

const goPreview1 = (id) => {
  router.push(`/preview/wallpaper/${id}`);
};
const goPreview2 = ({id, type}) => {
  router.push(`/classlist/index?id=${id}&type=${type}`);
};
const currentDate = computed(() => {
  return new Date().toLocaleDateString();
});

const router = useRouter();

const searchKeyword = ref('');

const handleSearch = () => {
  router.push(`/search/index?keyword=${encodeURIComponent(searchKeyword.value.trim() || '')}`);
};

const activeTab = ref('daily')



onMounted(() => {
  getBanner();
  getDayRandom();
  getNotice();
  getClassify();
});
</script>
<style lang="scss" scoped>
.homeLayout {
  min-height: 100vh;
  background-color: $background-color;
  padding: 20px;

  // Banner样式优化
  .banner {
    position: relative;

    .el-carousel__item {
      transition: all $transition-time;

      .like {
        display: block;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all $transition-time;
        }
      }
    }

    .search-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      width: 50%;
      max-width: 600px;

      .search-title {
        font-size: 26px;
        font-weight: 600;
        color: $text-primary;
        margin-bottom: 20px;
        text-align: center;
      }

      .search-input {
        :deep(.el-input__wrapper) {
          background: rgba(255, 255, 255, 0.9);
          border-radius: 25px;
          padding: 5px 15px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          backdrop-filter: blur(10px);

          &:hover, &.is-focus {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
          }
        }

        :deep(.el-input__inner) {
          height: 40px;
          font-size: 16px;
        }

        .search-icon {
          cursor: pointer;
          font-size: 20px;
          color: $primary-color;

          &:hover {
            color: darken($primary-color, 10%);
          }
        }
      }
    }
  }

  // 公告栏样式优化
  .notice {
    background: linear-gradient(to right, #fff, #f8f9fa);
    box-shadow: $box-shadow;
    transition: all $transition-time;

    &:hover {
      transform: translateY(-2px);
    }

    .left {
      i {
        color: $primary-color;
      }
    }

    .center {
      a {
        color: $text-regular;
        text-decoration: none;
        transition: color $transition-time;

        &:hover {
          color: $primary-color;
        }
      }
    }
  }

  // 每日推荐样式优化
  .wallpaper-section {
    margin: 40px 20px;

    .tab-header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;

      .date {
        color: $text-regular;
      }

      .more {
        padding: 5px 15px;
        border-radius: 20px;
        background: $primary-color;
        color: white;
        transition: all $transition-time;

        &:hover {
          background: darken($primary-color, 10%);
          transform: translateX(5px);
        }
      }
    }

    .waterfall-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;

      :deep(.masonry-wall) {
        margin: 0 auto;
      }

      .waterfall-item {
        width: 100%;
        break-inside: avoid;
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        img {
          width: 100%;
          height: auto;
          display: block;
          object-fit: cover;
          transition: transform 0.3s ease;
        }

        .item-title {
          padding: 10px;
          background: rgba(0, 0, 0, 0.5);
          color: white;
          margin: 0;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          backdrop-filter: blur(5px);
        }
      }
    }
  }

  :deep(.el-tabs__header) {
    margin-bottom: 20px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
    background-color: rgba(0,0,0,0.1);
  }

  :deep(.el-tabs__active-bar) {
    background-color: $primary-color;
  }

  :deep(.el-tabs__item) {
    font-size: 18px;

    &.is-active {
      color: $primary-color;
    }

    &:hover {
      color: $primary-color;
    }
  }
}
</style>
